

import './RegisterPage.scss'
import {Link} from 'react-router-dom';
import { Form, Button, Input, Radio } from "antd";
import { registerAPI } from '@/apis/user';
import { message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

function RegisterPage() {
    const navigate = useNavigate();
    const [ifloading, setIfloading] = useState(false);

    async function regist(value){
        setIfloading(true);
        const res = await registerAPI({
            user_role:value.role,
            telephone:value.phone,
            userpassword:value.confpassword,
            user_school:value.schoolname
        })
        setIfloading(false);
        if(res.data.success) {
            message.success(res.data.message);
            navigate('/login');
        }
        else message.error(res.data.message);
    }


    return (
        <div className="RegisterPage">
            <Form
                id='reg-form-place'
                name='regform'
                layout='horizontal'
                onFinish={regist}
                labelCol={
                    {
                        span: 8
                    }
                }
                wrapperCol={
                    {
                        span: 8
                    }
                }
            >
                <header className='reg-form-header'>
                    讯飞教育新用户注册
                </header>
                <Form.Item
                    label="电话号码"
                    name="phone"
                    rules={[
                        {
                            required: true,
                            message: '请填写您的电话号码',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="初始密码"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入您的初始密码',
                        },
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="确认密码"
                    name="confpassword"
                    rules={[
                        {
                            required: true,
                            message: '请确认您的初始密码',
                        },
                        ({ getFieldValue }) => ({
                          validator(_, value) {
                            if (!value || getFieldValue('password') === value) {
                              return Promise.resolve();
                            }
                            return Promise.reject(new Error('您输入的新密码与原来的不匹配'));
                          },
                        }),
                    ]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="选择你的身份"
                    name="role"
                    rules={[
                        {
                            required: true,
                            message: '请选择你的身份！'
                        }
                    ]}
                >
                    <Radio.Group>
                        <Radio value={'student'}>学生</Radio>
                        <Radio value={'teacher'}>老师</Radio>
                        <Radio value={'parent'}>家长</Radio>
                    </Radio.Group>
                </Form.Item>

                <Form.Item
                    label="所属学校全称"
                    name="schoolname"
                    rules={[
                        {
                            required: true,
                            message: '必须填写学校全称'
                        }
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    wrapperCol={
                        {
                            offset: 10
                        }
                    }
                >
                    <Button
                        className='reg-btn'
                        type="primary"
                        htmlType='submit'
                        loading={ifloading}
                    >
                        注册
                    </Button>
                </Form.Item>
                <Link to={'/login'} id='reg-to-log'>已有账号？点此登录</Link>
            </Form>
        </div>
    );
}

export default RegisterPage;